<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,user-scalable-no,initial-scale-1.0"/>
    <title>mjd首页</title>
    <link href="../lib/bootstrap-3.3.7-dist/css/bootstrap.css"  rel="stylesheet" >
    <link href="../lib/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="../lib/jquery1.11.3.js"></script>

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--    条件注释的作用就是当判断条件满足时，就会执行注释中的html代码 不满足时会当作注释忽略掉-->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="./base.css">
    <link rel="stylesheet" href="./jd.css">
</head>
<body>
    <!--头部-->
    <div class="jd_layout">
        <div class="jd_header">
            <div class="jd_header_box">
                <a href="#" class="icon_logo"></a>
                <form action="">
                    <span class="icon_search"></span>
                    <input type="search" placeholder="请输入搜索内容"><!--必须是type="search" 才具有搜索的功能后出后面的小键盘-->
                </form>
                <a href="#" class="login">登录</a>
            </div>
        </div>
        <!--banner-->
        <div id="jd-banner-carousel" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#jd-banner-carousel" data-slide-to="0" class="active"></li>
                <li data-target="#jd-banner-carousel" data-slide-to="1"></li>
                <li data-target="#jd-banner-carousel" data-slide-to="2"></li>
                <li data-target="#jd-banner-carousel" data-slide-to="3"></li>
                <li data-target="#jd-banner-carousel" data-slide-to="4"></li>
                <li data-target="#jd-banner-carousel" data-slide-to="5"></li>
                <li data-target="#jd-banner-carousel" data-slide-to="6"></li>
                <li data-target="#jd-banner-carousel" data-slide-to="7"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="./imges/banner/l1.jpg" alt="...">
                    <div class="carousel-caption">
                    </div>
                </div>
                <div class="item">
                    <img src="./imges/banner/l2.jpg" alt="...">
                    <div class="carousel-caption">
                    </div>
                </div>
                <div class="item ">
                    <img src="./imges/banner/l3.jpg" alt="...">
                    <div class="carousel-caption">
                    </div>
                </div>
                <div class="item">
                    <img src="./imges/banner/l4.jpg" alt="...">
                    <div class="carousel-caption">
                    </div>
                </div>
                <div class="item ">
                    <img src="./imges/banner/l5.jpg" alt="...">
                    <div class="carousel-caption">
                    </div>
                </div>
                <div class="item">
                    <img src="./imges/banner/l6.jpg" alt="...">
                    <div class="carousel-caption">
                    </div>
                </div>
                <div class="item ">
                    <img src="./imges/banner/l7.jpg" alt="...">
                    <div class="carousel-caption">
                    </div>
                </div>
                <div class="item">
                    <img src="./imges/banner/l8.jpg" alt="...">
                    <div class="carousel-caption">
                    </div>
                </div>
            </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#jd-banner-carousel" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#jd-banner-carousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
        <!--导航栏-->
        <div class="jd-nav ">
            <ul>
                <li>
                    <a href="#">
                        <img src="./imges/nav/nav0.png" alt="">
                        <p>分类查询</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./imges/nav/nav1.png" alt="">
                        <p>物流查询</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./imges/nav/nav2.png" alt="">
                        <p>购物车</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./imges/nav/nav3.png" alt="">
                        <p>我的京东</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./imges/nav/nav4.png" alt="">
                        <p>充值</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./imges/nav/nav5.png" alt="">
                        <p>领券中心</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./imges/nav/nav6.png" alt="">
                        <p>京东超市</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./imges/nav/nav7.png" alt="">
                        <p>我的超市</p>
                    </a>
                </li>
            </ul>
        </div>
        <!--商品区域products-->
        <main class="jd-product">
            <section class="jd-product-box jd-searchkill">
                <div class="product-top">
                    <div class="jd-searchkill_left">
                        <span class="sk_icon"></span>
                        <h4 class="sk_name" >掌上</h4>
                        <div class="sk_time">
                            <span class="num">0</span>
                            <span class="num">0</span>
                            <span class="str">:</span>
                            <span class="num">0</span>
                            <span class="num">0</span>
                            <span class="str">:</span>
                            <span class="num">0</span>
                            <span class="num">0</span>
                        </div>
                    </div>
                    <div class="jd-searchkill_right">
                        <a href="#">更多>></a>
                    </div>
                </div>
                <div class="product-bot"></div>
            </section>
            <section class="jd-product-box">
                <div class="product-top">
                    <h3>超值购</h3>
                </div>
                <div class="product-bot"></div>
            </section>
            <section class="jd-product-box">
                <div class="product-top">
                    <h3>热门活动</h3>
                </div>
                <div class="product-bot"></div>
            </section>

        </main>
    </div>





    <!--脚本放在最底下-->
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="../lib/jquery1.11.3.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="../lib/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="./in.js"></script>
</body>
</html>